<template>
	<div class="page-container">
		<h1>PBKDF2加密工具</h1>
		<el-form :model="form" label-position="top">
			<el-form-item label="明文">
				<el-input v-model.trim="form.plaintext" placeholder="请输入要加密的明文"></el-input>
			</el-form-item>
			<el-form-item label="盐值">
				<el-input v-model.trim="form.salt" placeholder="请输入盐值"></el-input>
			</el-form-item>
			<el-form-item label="迭代次数">
				<el-input-number v-model="form.iterations" :min="1" :max="100000"></el-input-number>
			</el-form-item>
			<el-form-item label="密钥长度">
				<el-input-number v-model="form.keySize" :min="1" :max="1000"></el-input-number>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="encrypt">加密</el-button>
			</el-form-item>
		</el-form>
		<el-form label-position="top">
			<el-form-item label="加密结果">
				<el-input v-model="encryptedText"></el-input>
			</el-form-item>
		</el-form>
		
	</div>
</template>

<script>
	import CryptoJS from "crypto-js";

	export default {
		data() {
			return {
				form: {
					plaintext: "",
					salt: "",
					iterations: 1000,
					keySize: 128,
				},
				encryptedText: "",
			};
		},
		methods: {
			encrypt() {
				const plaintext = this.form.plaintext;
				const salt = this.form.salt;
				const iterations = this.form.iterations;
				const keySize = this.form.keySize;

				if (!plaintext) {
					this.$message.error("明文不能为空！");
					return;
				}

				if (!salt) {
					this.$message.error("盐值不能为空！");
					return;
				}

				const encrypted = CryptoJS.PBKDF2(plaintext, salt, {
					keySize: keySize / 32,
					iterations: iterations,
				}).toString();

				this.encryptedText = encrypted;
			},
		},
	};
</script>


